<template>
<div class="shoukuan">

  <h2>收款计划管理</h2>

  <el-form :model="form" :inline="true">
    <el-form-item label="小区名称">
      <el-input v-model="form.premiseName" placeholder="请输入小区名称"></el-input>
    </el-form-item>
    <el-form-item label="租客姓名">
      <el-input v-model="form.tenantName" placeholder="请输入租客姓名"></el-input>
    </el-form-item>
    <el-form-item label="收款单号">
      <el-input v-model="form.receiptOrderNo" placeholder="请输入收款单号"></el-input>
    </el-form-item><br>
    <el-form-item label="收款状态">
      <el-select v-model="form.skStatus" placeholder="请选择">
        <el-option label="未收款" value="1"></el-option>
        <el-option label="已收款" value="2"></el-option>
        <el-option label="已中止" value="3"></el-option>
        <el-option label="已冻结" value="4"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="账单类型">
      <el-select v-model="form.billType" placeholder="请选择">
        <el-option label="分期变更" value="1"></el-option>
        <el-option label="租约保理变更" value="2"></el-option>
        <el-option label="退租变更" value="3"></el-option>
        <el-option label="普通账单" value="4"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="租房合同编号">
      <el-input v-model="form.contractNo" placeholder="请输入租房合同编号"></el-input>
    </el-form-item><br>
    <el-form-item label="应收日期">
    <el-date-picker
      v-model="form.collectionStartDate"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
  </el-form-item>
    <el-form-item label="至">
      <el-date-picker
        v-model="form.collectionEndDate"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item><br>
    <el-form-item label="实收日期">
      <el-date-picker
        v-model="form.startDate"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="至">
      <el-date-picker
        v-model="form.endDate"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>

    <el-button type="warning" @click="initData">查询</el-button>
    <el-button style="border-color: orange" @click="reset">清空</el-button>
  </el-form>


<!--  <div style="width: 1470px;height: 1611px;border: 1px solid black;margin-left: 20px">-->
    <el-tabs type="border-card" @tab-click="handleClick" stretch v-model="activeName">

      <el-tab-pane label="房租收款计划" name="first" >
        <el-row>
          <el-col :span="4"><b>应收金额总计:{{amountReceivable}}元</b></el-col>
          <el-col :span="8"><b>实收金额总计:{{amountCollected}}元</b></el-col>
        </el-row>



        <el-table
          style="border: 1px solid black"
          :data="tableData"
          v-loading="loading">
          <el-table-column
            prop="contractNo"
            label="租房合同号">
          </el-table-column>
          <el-table-column
            prop="receiptOrderNo"
            label="收款单号">
          </el-table-column>
          <el-table-column
            prop="roomName"
            label="承租房间">
          </el-table-column>
          <el-table-column
            prop="tenantName"
            label="租客姓名">
          </el-table-column>
          <el-table-column
            prop="premiseName"
            label="小区名称">
          </el-table-column>
          <el-table-column
            prop="paymentAmount"
            label="支付金额">
          </el-table-column>
          <el-table-column
            label="账单">
            <template slot-scope="scope">第{{scope.row.receiptNumber}}期</template>
          </el-table-column>
          <el-table-column
            label="收款状态">
            <template slot-scope="scope">
              <span v-if="scope.row.skStatus==1">未收款</span>
              <span v-if="scope.row.skStatus==2">已收款</span>
              <span v-if="scope.row.skStatus==3">已终止</span>
              <span v-if="scope.row.skStatus==4">已冻结</span>
            </template>
          </el-table-column>
          <el-table-column
            label="账单类型">
            <template slot-scope="scope">
              <span v-if="scope.row.billType==1">分期变更</span>
              <span v-if="scope.row.billType==2">租约保理变更</span>
              <span v-if="scope.row.billType==3">退租变更</span>
              <span v-if="scope.row.billType==4">普通账单</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="collectionDate"
            label="应收日期">
          </el-table-column>
          <el-table-column
            prop="realCollectionDate"
            label="实收日期">
          </el-table-column>
          <el-table-column
            prop="payMethod"
            label="支付方式">
          </el-table-column>
          <el-table-column
            prop="operationUser"
            label="操作人">
          </el-table-column>

        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="sizes"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane label="租务收款计划" name="second">




        <el-table
          :data="tableData"
          style="border: 1px solid black"
          v-loading="loading">
          <el-table-column
            prop="contractNo"
            label="租房合同号">
          </el-table-column>
          <el-table-column
            prop="receiptOrderNo"
            label="收款单号">
          </el-table-column>
          <el-table-column
            prop="roomName"
            label="承租房间">
          </el-table-column>
          <el-table-column
            prop="tenantName"
            label="租客姓名">
          </el-table-column>
          <el-table-column
            prop="premiseName"
            label="小区名称">
          </el-table-column>
          <el-table-column
            prop="paymentAmount"
            label="支付金额">
          </el-table-column>
          <el-table-column
            label="账单">
            <template slot-scope="scope">第{{scope.row.receiptNumber}}期</template>
          </el-table-column>
          <el-table-column
            label="收款状态">
            <template slot-scope="scope">
              <span v-if="scope.row.skStatus==1">未收款</span>
              <span v-if="scope.row.skStatus==2">已收款</span>
              <span v-if="scope.row.skStatus==3">已终止</span>
              <span v-if="scope.row.skStatus==4">已冻结</span>
            </template>
          </el-table-column>
          <el-table-column
            label="账单类型">
            <template slot-scope="scope">
              <span v-if="scope.row.billType==1">分期变更</span>
              <span v-if="scope.row.billType==2">租约保理变更</span>
              <span v-if="scope.row.billType==3">退租变更</span>
              <span v-if="scope.row.billType==4">普通账单</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="collectionDate"
            label="应收日期">
          </el-table-column>
          <el-table-column
            prop="realCollectionDate"
            label="实收日期">
          </el-table-column>
          <el-table-column
            prop="payMethod"
            label="支付方式">
          </el-table-column>
          <el-table-column
            prop="operationUser"
            label="操作人">
          </el-table-column>

        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="sizes"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-tab-pane>

    </el-tabs>
  </div>

<!--</div>-->
</template>

<script>
import {allList} from "@/api/wishu/shoukuan";
export default {
  name: "index",
  data(){
    return{
      tableData:[],
      current:1,
      sizes:[2,3,5,10,20],
      size:5,
      total:0,
      form:{},
      loading:false,
      amountReceivable:0,
      amountCollected:0,
      activeName:'first'
    }
  },
  created() {
    this.initData();
  },
  methods:{
    initData(){
      this.loading=true;
      allList(this.current,this.size,this.form).then((res)=>{
        this.tableData=res.records;
        this.total=res.total;
        this.amountReceivable=res.amountReceivable;
        this.amountCollected=res.amountCollected;
        this.loading=false;
      })
    },
    handleSizeChange(val) {
      this.loading=true;
      this.size=val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.loading=true;
      this.current=val;
      this.initData();
    },
    handleClick(tab, event) {
      if(tab.name == 'first'){
        this.form.operationType=1;
        this.initData();
      }
      if(tab.name == 'second'){
        this.form.operationType=2;
        this.initData();
      }
    },
    reset(){
      this.form={};
    }
  }
}
</script>

<style scoped>

</style>
